<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>3-父组件向子组件传值$</title>
  <script src="../../js/vue.js"></script>
</head>
<body>
  <div id="app">

    <!-- 2、 需要动态的数据的时候 需要属性绑定的形式设置 此时 ptitle  来自父组件data 中的数据 .
         传的值可以是数字、对象、数组等等
    -->
    <my-component :title="title" :person="person"></my-component>
  </div>
</body>
<script type="text/javascript">

  Vue.component('my-component',{
    props:['title','person'],

    data: function () {
      return {
        msg:'子组件本身数据'
      }
    },

    // 3、 子组件用属性props接收父组件传递过来的数据
    template:'<div>{{this.msg + "----" + title + person.name}}</div>'

  })

  new Vue({
    el:'#app',
    data : {
      title:'父组件数据',
      person:{
        name:'张三',
        age:123
      }
    }
  })
</script>
</html>